<template>
  <div class="box4" ref="map">我是地图</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import chinaJSON from './china.json'
//获取DOM节点
let map = ref()
//注册中国地图
echarts.registerMap('china', chinaJSON as any)

onMounted(() => {
  let mycharts = echarts.init(map.value)
  //配置项
  let option = {
    //地图组件
    geo: {
      map: 'china',
      roam: true, //鼠标缩放大小和移动
      //地图布局调整
      left: 50,
      top: 110,
      right: 50,
      bottom: 0,
      //地图的文字设置
      label: {
        show: true,
        color: 'white',
        fontSize: 14,
      },
      itemStyle: {
        //线性渐变
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'red', // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'blue', // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
      emphasis: {
        itemStyle: {
          color: 'red',
        },
        label: {
          fontSize: 40,
        },
      },
    },
    legend: {},
    //布局位置
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 500,
    },
    series: [
      {
        type: 'lines', //航线
        data: [
          {
            coords: [
              [116.405285, 39.904989], //起点：北京
              [119.306239, 26.075302], //终点：福建省
            ],
            lineStyle: {
              color: 'white',
              curveness: 0.3,
            },
          },
          {
            coords: [
              [116.405285, 39.904989], //起点：北京
              [114.298572, 30.584355], //终点：湖北
            ],
            lineStyle: {
              color: 'white',
              curveness: 0.3,
            },
          },
          {
            coords: [
              [116.405285, 39.904989], //起点：北京
              [91.132212, 29.660361], //终点：西藏
            ],
            lineStyle: {
              color: 'white',
              curveness: 0.3,
            },
          },
          {
            coords: [
              [116.405285, 39.904989], //起点：北京
              [102.712251, 25.040609], //终点：云南
            ],
            lineStyle: {
              color: 'white',
              curveness: 0.3,
            },
          },
          {
            coords: [
              [116.405285, 39.904989], //起点：北京
              [113.280637, 23.125178], //终点：广东
            ],
            lineStyle: {
              color: 'white',
              curveness: 0.3,
            },
          },
          {
            coords: [
              [116.405285, 39.904989], //起点：北京
              [108.320004, 22.82402], //终点：广西
            ],
            lineStyle: {
              color: 'white',
              curveness: 0.3,
            },
          },
          {
            coords: [
              [113.280637, 23.125178], //起点：广东
              [101.778916, 36.623178], //终点：青海省
            ],
            lineStyle: {
              color: 'white',
              curveness: 0.3,
            },
          },
          {
            coords: [
              [113.280637, 23.125178], //起点：广东
              [87.617733, 43.792818], //终点：新疆
            ],
            lineStyle: {
              color: 'white',
              curveness: 0.3,
            },
          },
          {
            coords: [
              [87.617733, 43.792818], //起点：新疆
              [113.280637, 23.125178], //终点：广东
            ],
            lineStyle: {
              color: 'white',
              curveness: 0.3,
            },
          },
          {
            coords: [
              [108.320004, 22.82402], //起点：广西
              [113.280637, 23.125178], //终点：广东
            ],
            lineStyle: {
              color: 'white',
              curveness: 0.3,
            },
          },
          {
            coords: [
              [113.280637, 23.125178], //终点：广东
              [126.642464, 45.756967], //终点：黑龙江
            ],
            lineStyle: {
              color: 'white',
              curveness: 0.3,
            },
          },
          {
            coords: [
              [126.642464, 45.756967], //终点：黑龙江
              [113.280637, 23.125178], //终点：广东
            ],
            lineStyle: {
              color: 'white',
              curveness: 0.3,
            },
          },
          {
            coords: [
              [113.280637, 23.125178], //终点：广东
              [121.509062, 25.044332], //终点：台湾
            ],
            lineStyle: {
              color: 'white',
              curveness: 0.3,
            },
          },
          {
            coords: [
              [116.405285, 39.904989], //终点：北京
              [121.509062, 25.044332], //终点：台湾
            ],
            lineStyle: {
              color: 'white',
              curveness: 0.3,
            },
          },
          {
            coords: [
              [120.971485, 23.749452], //终点：台湾
              [119.306239, 26.075302], //终点：福建
            ],
            lineStyle: {
              color: 'white',
              curveness: 0.3,
            },
          },
          {
            coords: [
              [119.306239, 26.075302], //终点：福建
              [120.971485, 23.749452], //终点：台湾
            ],
            lineStyle: {
              color: 'white',
              curveness: 0.3,
            },
          },
          {
            coords: [
              [119.306239, 26.075302], //终点：福建
              [109.754859, 19.189767], //终点：海南
            ],
            lineStyle: {
              color: 'white',
              curveness: 0.3,
            },
          },
        ],
        //统一线特效的配置
        effect: {
          show: true,
          period: 10, //特效动画的时间，单位为 s
          symbol:
            'path://M599.06048 831.309824l12.106752-193.404928 372.860928 184.430592L984.02816 710.206464 617.906176 367.33952 617.906176 151.638016c0-56.974336-46.188544-143.064064-103.158784-143.064064-56.974336 0-103.158784 86.089728-103.158784 143.064064L411.588608 367.33952 45.461504 710.206464l0 112.129024 366.660608-184.430592 14.999552 209.27488c0 5.05344 0.594944 9.892864 1.124352 14.749696l-66.591744 60.348416 0 66.587648 153.986048-50.879488 2.43712-0.80896 147.439616 51.688448 0-66.587648-68.758528-62.253056L599.06048 831.309824z',
          symbolSize: 20,
          roundTrip: true, //是否原路返回
          trailLength: 0, //特效尾迹的长度,数值0~1
        },
      },
    ],
  }
  mycharts.setOption(option)
})
</script>

<style scoped></style>
